<template>
	<view class="profile-container">
    <!-- 填充区 -->
    <view class="statusBar pageBg" :style="{ height: getStatusBarHeight()+ 'px'}"></view>
		<!-- 头像区域 -->
		<view class="avatarBox pageBg">
      <view class="avatar-section">
        <view class="avatar-wrapper" @tap="previewAvatar">
          <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        </view>
        <view class="username-wrapper">
          <text class="username">{{userInfo.username}}</text>
          <view class="edit" @tap="navigateToProfileSettings">
            <uni-icons type="compose" size="23"></uni-icons>
          </view>
        </view>
      </view>
    </view>
		
		<!-- 内容区域 -->
    <view class="content pageBg">
      <!-- 个人信息列表 -->
      <view class="info-section">
        <view class="section-title">基本信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">用户名</text>
            <view class="value">
              <text>{{userInfo.username}}</text>
            </view>
          </view>
          
          <view class="info-item">
            <text class="label">手机号码</text>
            <view class="value">
              <text>{{userInfo.phone}}</text>
            </view>
          </view>
          
          <view class="info-item">
            <text class="label">身份证号</text>
            <view class="value">
              <text>{{maskIdCard(userInfo.idCard) || '未绑定'}}</text>
            </view>
          </view>
          
          <view class="info-item">
            <text class="label">性别</text>
            <view class="value">
              <text>{{userInfo.gender || '未设置'}}</text>
            </view>
          </view>
          
          <view class="info-item">
            <text class="label">出生日期</text>
            <view class="value">
              <text>{{userInfo.birthday}}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 其他选项 -->
      <view class="options-section">
        <view class="section-title">其他设置</view>
        <view class="info-list">
          <view class="info-item" @tap="navigateToSettings">
            <text class="label">通知设置</text>
            <view class="value">
              <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
            </view>
          </view>
          
          <view class="info-item" @tap="checkUpdate">
            <view class="label">
              <text>检查更新</text>
              <text class="value-text">当前版本 v1.0.0</text>
            </view>
            <view class="value">
              <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
            </view>
          </view>
          
          <!-- <view class="info-item" @tap="showPrivacyPolicy">
            <text class="label">隐私政策</text>
            <view class="value">
              <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
            </view>
          </view>
          
          <view class="info-item" @tap="showUserAgreement">
            <text class="label">用户协议</text>
            <view class="value">
              <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
            </view>
          </view> -->
        </view>
      </view>

      <!-- 隐私设置 -->
      <view class="privacy-section">
        <view class="section-title">隐私设置</view>		
        <view class="info-list">
          <view class="info-item" @tap="showPrivacyPolicy">
            <text class="label">隐私政策</text>
            <view class="value">
              <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
            </view>
          </view>
          
          <view class="info-item" @tap="showUserAgreement">
            <text class="label">用户协议</text>
            <view class="value">
              <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <!-- 退出登录按钮 -->
		  <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { getStatusBarHeight } from '@/utils/system'
import { useUserStore } from '@/stores'
import { getUserInfoAPI } from '@/services/user'
import { onLoad, onShow } from '@dcloudio/uni-app'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

const useInfoStore = useUserStore()
//用户基本信息
const userInfo = ref({
	avatar: '/static/default-avatar.png',
	username: '张三',
	phone: '13800138000',
	idCard: '310000199001011234',
	gender: '男',
	birthday: '1990-01-01'
})

// 获取用户信息
const getUserInfo = async () => {
	const res = await getUserInfoAPI()
	console.log('用户信息', res)
	userInfo.value = res.data
}
onShow(() => {
	getUserInfo()
})

//身份证号脱敏
const maskIdCard = (idCard) => { 
	if (!idCard) return ''
	return idCard.replace(/^(.{6})(?:\d+)(.{4})$/, '$1********$2')
}

// 预览头像
const previewAvatar = () => {
  uni.previewImage({
    urls: [userInfo.value.avatar],
    current: userInfo.value.avatar
  })
}

// 跳转到资料设置页面
const navigateToProfileSettings = () => {
  uni.navigateTo({
    url: '/subPackages/settings/profileSettings/profileSettings'
  })
}

//通知设置跳转
const navigateToSettings = () => {
	uni.navigateTo({
		url: '/subPackages/settings/settings/settings'
	})
}

//关于我们
const showAbout = () => {
	uni.showModal({
		title: '关于我们',
		content: '疫苗预约平台 v1.0.0\n为您提供便捷的疫苗预约服务',
		showCancel: false
	})
}

//退出登录
const handleLogout = () => {
	uni.showModal({
		title: '退出登录',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				useInfoStore.clearUserInfo()
				uni.reLaunch({
					url: '/pages/welcome/welcome'
				})
			}
		}
	})
}

// 检查更新
const checkUpdate = () => {
	uni.showLoading({
		title: '检查更新...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		uni.showModal({
			title: '版本信息',
			content: '当前已是最新版本 v1.0.0',
			showCancel: false
		})
	}, 1000)
}

// 隐私政策
const showPrivacyPolicy = () => {
	uni.navigateTo({
		url: '/subPackages/settings/privacy/privacy'
	})
}

// 用户协议
const showUserAgreement = () => {
	uni.navigateTo({
		url: '/subPackages/settings/agreement/agreement'
	})
}
</script>

<style lang="scss">
.profile-container {
	// min-height: 100vh;
	background-color: $uni-bg-color;
  .statusBar{
    width: 100%;
    background-color: $uni-bg-color;
  }
	.avatarBox {
    padding: 10rpx 30rpx 100rpx;
    position: relative;
    .avatar-section {
      background-color: rgba(240, 248, 255,0.4);
      padding: 60rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4rpx 10rpx 0 rgba(0, 0, 0, 0.1);
      border-radius: 30rpx;
      
      .avatar-wrapper {
        position: relative;
        margin-bottom: 20rpx;
        
        .avatar {
          width: 160rpx;
          height: 160rpx;
          border-radius: 80rpx;
        }
      }
      
      .username-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: relative;
        
        .username {
          font-size: 32rpx;
          color: #333333;
          font-weight: bold;
          text-align: center;
        }
        
        .edit {
          // position: absolute;
          // right: 50%;
          // transform: translateX(calc(100% + 80rpx));
          margin-left: 30rpx; // 添加这行，设置与用户名的间距
        }
      }
    }
  }

	.content {
    padding: 0 30rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    position: relative;
    top: -70rpx;
  }

	.section-title {
		font-size: 32rpx;
		padding: 30rpx 25rpx 20rpx;
    font-weight: bold;
	}
	
	.info-list {
		background-color: $uni-bg-color;
    border-radius: 30rpx;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
      padding-left: 25rpx;
			border-bottom: 1rpx solid #EEEEEE;
			
			&:last-child {
				border-bottom: none;
			}
			
			.label {
				font-size: 28rpx;
				color: #333333;
			}
			
			.value {
				display: flex;
				align-items: center;
				
				text {
					font-size: 28rpx;
					color: #666666;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.logout-btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
    background-color: #FFEBEB;
		color: #FF4D4F;
		font-size: 28rpx;
		margin-top: 60rpx;
		border-radius: 40rpx;
    border: 2rpx solid #FF4D4F;
	}
	
	.value-text {
		font-size: 26rpx !important;
		color: #666666 !important;
		margin-left: 20rpx;
	}
}
</style> 